<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <div class="rightHeader">
          <el-button type="primary" size="small" @click="newfile()"
            >新建文件夹</el-button
          >
          <el-button
            type="success"
            size="small"
            @click="showData"
            v-if="parentId != ''"
            >上传附件</el-button
          >
          <el-button @click="getBack()" size="small" v-if="parentId != ''"
            >上一级</el-button
          >
        </div>
      </div>
      <div class="navigaTow">
        <b @click="dataSkip(null)">日常文件管理</b>
        <b v-for="(item,index) in navigaArr" :key="index" @click="dataSkip(item)"> / {{item.name}}</b>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table :data="tableData" style="width: 100%" size="small">
            <el-table-column align="left" label="文件名" width="500">
              <template slot-scope="scope">
                <span
                  style="display: inline-block;text-align: left;width: 100%;"
                >
                  <span
                    class="filebox"
                    v-if="scope.row.types == '1'"
                    @click="getData(scope.row)"
                  ></span>
                  <span class="fileboxs" v-else></span>
                  <b
                    v-if="scope.row.types == '1'"
                    @click="getData(scope.row)"
                    >{{ scope.row.name }}</b
                  >
                  <b v-else>{{ scope.row.file }}</b>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="上传时间"
              v-if="parentIdNew != null"
            >
              <template slot-scope="scope">
                <b v-if="scope.row.types == '2'">{{ scope.row.addTime }}</b>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="上传人"
              v-if="parentIdNew != null"
            >
              <template slot-scope="scope">
                <b v-if="scope.row.types == '2'">{{ scope.row.userName }}</b>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot-scope="scope">
                <!-- <el-button
                type="primary"
                size="mini"
                v-if=" scope.row.types=='1' "
                @click="getData(scope.row)"
                >查看</el-button
                >-->
                <el-button
                  type="text"
                  v-if="scope.row.types != '1'"
                  @click="dataDownload(scope.row)"
                  >下载</el-button
                >
                <el-button
                  type="text"
                  @click="handEdit(scope.row)"
                  v-if="scope.row.types == '1'"
                  >编辑</el-button
                >
                <el-button type="text" @click="handDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- <el-pagination
              background
              layout="prev, pager, next"
              @current-change="dataTotal"
              :page-size="pageSize"
              :current-page="pageNum"
              :total="total"
      ></el-pagination>-->
      <!-- </div> -->

      <!-- 点击新增文件夹 -->
      <el-dialog title="文件夹" :visible.sync="dialogFile" width="26%">
        <el-form
          :model="ruleFile"
          :rules="File"
          ref="ruleFile"
          label-width="100px"
        >
          <el-form-item label="文件名称" prop="name">
            <el-input v-model="ruleFile.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFile('ruleFile')"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog
        width="550px"
        :title="modelName"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        @closed="closeDialog"
      >
        <el-form
          label-width="95px"
          :model="dutyFrom"
          :hide-required-asterisk="false"
        >
          <el-form-item label="附件：" prop="file" class="boxCount">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="successFile"
              :on-remove="handleDealFileRemove"
              :file-list="fileList"
              multiple
              ref="rebateUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              class="saveBtn"
              type="primary"
              @click="submitForm"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- <el-pagination
        background
        style="float:right"
        layout="prev, pager, next"
        :page-size="pagesize"
        :current-page="currentPage"
        :total="total"
        @current-change="pageChange"
      ></el-pagination>-->
    </el-card>
  </div>
</template>
<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      tableData: [],
      parentIdNew: null,
      ruleFile: {
        name: ""
      },
      File: {
        name: [
          { required: true, message: "请输入文件夹", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ]
      },
      fatherId: "",
      dialogFile: false,
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      uploadUrls: configJson.API_URL + "fileController",
      fileList: [],
      pagesize: 10,
      currentPage: 1,
      total: 0,
      files: "",
      fileType: "",
      fileTypeList: [],
      dialogFormVisible: false,
      isActive: 6,
      istype: 6,
      input2: "",
      modelName: "上传文件弹窗",
      navigaArr: [
        
      ],
      updateId: "", //要修改的id
      parentId: "",
      dutyFrom: {
        id: "",
        aimsId: "",
        year: "2020",
        fileQuarter: "",
        files: [],
        type: ""
      },
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ]
    };
  },
  mounted() {
    //this.getData(this.isActive);
    // this.getFileType();
    this.getData();
  },
  methods: {
    // 二级导航跳转
    dataSkip(val){
      if( val == null ){
        this.parentId = "";
      }else{
        this.parentId = val.id
      }
      this.getData();
    },

    // 返回上一级
    getBack() {
      if (this.fatherId == null) {
        this.parentId = "";
      } else {
        this.parentId = this.fatherId;
      }
      console.log(this.fatherId);
      this.getData();
    },
    // 下载
    dataDownload(val) {
      window.location.href = `${this.uploadUrls}/${val.file}`;
    },
    // 删除
    handDelete(val) {
      if (val.types == 1) {
        this.$axios
          .post(
            `DailyFileTypeController/remove`,
            {
              id: val.id
            },
            2
          )
          .then(res => {
            if (res.code == 200) {
              console.log(res);
              this.getData();
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$axios
          .post(
            `/DailyFileLibController/deleteDailyFileLib`,
            {
              id: val.id
            },
            2
          )
          .then(res => {
            if (res.code == 200) {
              console.log(res);
              this.getData();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 新建文件夹
    newfile() {
      this.updateId = "";
      this.dialogFile = true;
      this.ruleFile.name = "";
    },
    // 修改
    handEdit(val) {
      this.dialogFile = true;
      this.updateId = val.id;
      this.ruleFile.name = val.name;
    },
    submitFile(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.updateId) {
            let obj = {
              name: this.ruleFile.name,
              id: this.updateId
            };
            this.$axios
              .post("/DailyFileTypeController/update", obj, 2)
              .then(res => {
                if (res.code == 200) {
                  console.log(res);
                  this.dialogFile = false;
                  this.getData();
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            let obj = {
              name: this.ruleFile.name,
              parentId: this.parentId
            };
            this.$axios
              .post("/DailyFileTypeController/add", obj, 2)
              .then(res => {
                if (res.code == 200) {
                  console.log(res);
                  this.dialogFile = false;
                  this.getData();
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        }
      });
    },
    submitForm() {
      if (this.dutyFrom.files.length == 0) {
        this.$message.error("附件不能为空");
        return;
      }
      console.log(this.parentId);
      let obj = {
        files: this.dutyFrom.files,
        type: this.parentId
      };
      console.log(obj);
      this.$axios
        .post("/DailyFileLibController/addFile", obj)
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.dialogFormVisible = false;
            this.fileList = [];
            this.$message.success("上传成功");
            console.log(this.isActive);
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    closeDialog() {},
    showData() {
      this.dialogFormVisible = true;
      let date = new Date();
      let year = date.getFullYear();
      console.log(year);
      this.dutyFrom.year = year + "";
    },
    getData(val) {
      console.log(val, 8888);
      if (val) {
        this.parentId = val.id;
      }
      this.$axios
        .post(
          `DailyFileTypeController/getList`,
          {
            parentId: this.parentId
          },
          2
        )
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            if (val) {
              let arr = this.navigaArr.indexOf({ id: val.id });
              if (arr == -1) {
                this.navigaArr.push({
                  name: val.name,
                  id: val.id
                });
              } else {
                let array = [];
                for (let i = 0; i < this.navigaArr.length; i++) {
                  if (this.navigaArr[i].id == val.id) {
                    this.navigaArr = array;
                    return;
                  } else {
                    array.push({
                      name: this.navigaArr[i].name,
                      id: this.navigaArr[i].id
                    });
                  }
                }
              }
            } else {
              let array = [];
              if (this.parentId == "") {
                this.navigaArr = [];
              } else {
                for (let i = 0; i < this.navigaArr.length; i++) {
                  if (this.navigaArr[i].id == this.parentId) {
                     array.push({
                      name: this.navigaArr[i].name,
                      id: this.navigaArr[i].id
                    });
                    this.navigaArr = array;
                    break;
                  } else {
                    array.push({
                      name: this.navigaArr[i].name,
                      id: this.navigaArr[i].id
                    });
                  }
                }
              }
            }
            console.log(this.navigaArr, 7777);
            let arr1 = res.data.dailyFileTypes;
            arr1.forEach((item, index) => {
              item.types = 1;
            });
            let arr2 = res.data.dailyFileLibs;
            arr2.forEach((item, index) => {
              item.types = 2;
            });
            this.tableData = arr1.concat(arr2);
            this.fatherId = res.data.fatherId;
            this.parentIdNew = res.data.parentIdNew;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    fileLists(arr) {
      let str = arr.split("/");
      return str.pop();
    },
    successFile(response, file, fileList) {
      if (response.code == 200) {
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
        this.fileList = fileList;
        this.dutyFrom.files = this.fileList.map((o, i) => {
          return o.response.data;
        }); //获取上传文件名
      }
    },
    handleDealFileRemove(file, fileList) {
      this.fileName = "";
    },
    pageChange(page) {
      this.currentPage = page;
      this.getData(this.isActive);
    },
    removePermiss(data) {
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/fileController/deleteFileLib", { id: data.id }, 2)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getData(this.isActive);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(e => e);
    }
    // 获取文件类别
    // getFileType() {
    //   this.$axios
    //     .post("fileLibTypeController/getList")
    //     .then(res => {
    //       if (res.code == 200) {
    //         this.fileTypeList = res.data;
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }
  }
};
</script>
<style scoped>
.rightHeader {
  display: flex;
  justify-content: center;
  align-items: center;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
.userIntSize {
  width: 80% !important;
}
.all {
  width: 96%;
  height: 700px;
  margin: 0 auto;
}
.left {
  float: left;
  width: 16%;
  padding-left: 2%;
  height: 100%;
}
.right {
  float: right;
  width: 84%;
  height: 100%;
  background: #fff;
}
.btn_bottom {
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background: #66b1ff;
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
  cursor: pointer;
}
.active {
  background: #67c23a;
}
.searchTop {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.searchTop > b {
  font-size: 16px;
  font-weight: 500;
}
.searchTop > .inputs {
  width: 200px;
}
.filebox,
.fileboxs {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  background: url("../../assets/img/file.png");
  background-size: 100% 100%;
  cursor: pointer;
}
.fileboxs {
  background: url("../../assets/img/txt.png");
  background-size: 100% 100%;
}
.navigaTow {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  height: 16px;
  line-height: 16px;
}
.navigaTow > b {
  cursor: pointer;
  color: #303133;
  font-size: 12px;
}
</style>
